import React from 'react';
import { useNavigate } from 'react-router-dom';
import { LeftOutlined } from '@ant-design/icons';
import { Typography, Button, Row, Col, Space } from 'antd';
import './PageHeader.css';

interface PageHeaderProps {
  title: string;
  extra?: React.ReactNode;
}

const PageHeader: React.FC<PageHeaderProps> = ({ title, extra }) => {
  const navigate = useNavigate();

  return (
    <div className="page-header">
      <Row align="middle" justify="space-between" style={{ width: '100%' }}>
        <Col>
          <Space align="center">
            <Button
              type="text"
              icon={<LeftOutlined />}
              onClick={() => navigate(-1)}
              className="back-button"
            />
            <Typography.Text strong className="header-title">
              {title}
            </Typography.Text>
          </Space>
        </Col>
        {extra && <Col>{extra}</Col>}
      </Row>
    </div>
  );
};

export default PageHeader;
